<template>
  <div class="statistics-container" v-loading="loading">
    <el-row :gutter="20" class="header-cards">
      <el-col :span="6" v-for="(card, index) in overviewCards" :key="index">
        <el-card shadow="hover" class="stat-card">
          <div class="card-content">
            <div class="card-icon" :style="{ backgroundColor: card.color }">
              <i :class="card.icon"></i>
            </div>
            <div class="card-info">
              <div class="card-value">{{ card.value }}</div>
              <div class="card-label">{{ card.label }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-tabs v-model="activeTab" class="statistics-tabs" @tab-click="handleTabChange">
      <el-tab-pane label="总体概览" name="overview">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">题目状态分布</span>
              </div>
              <div ref="topicStatusChart" style="height: 300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">申请状态分布</span>
              </div>
              <div ref="appStatusChart" style="height: 300px;"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="题目分析" name="topic">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">难度分布</span>
              </div>
              <div ref="difficultyChart" style="height: 300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">审核状态</span>
              </div>
              <div ref="auditStatusChart" style="height: 300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">标签分布TOP15</span>
              </div>
              <div ref="tagChart" style="height: 300px;"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="12">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">热门题目TOP10</span>
              </div>
              <el-table :data="topicStats.popularityRanking" height="350" stripe>
                <el-table-column type="index" label="排名" width="60" />
                <el-table-column prop="title" label="题目名称" show-overflow-tooltip />
                <el-table-column prop="teacherName" label="指导教师" width="150" />
                <el-table-column prop="applicationCount" label="申请人次" width="100" align="center" />
                <el-table-column label="容量" width="100" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.currentStudents }}/{{ scope.row.maxStudents }}
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">录取率TOP10</span>
              </div>
              <el-table :data="topicStats.acceptanceRanking" height="350" stripe>
                <el-table-column type="index" label="排名" width="60" />
                <el-table-column prop="title" label="题目名称" show-overflow-tooltip />
                <el-table-column prop="teacherName" label="指导教师" width="150" />
                <el-table-column prop="acceptanceRate" label="录取率" width="100" align="center">
                  <template slot-scope="scope">
                    <el-tag :type="getRateType(scope.row.acceptanceRate)">
                      {{ scope.row.acceptanceRate }}%
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="教师分析" name="teacher">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">职称分布</span>
              </div>
              <div ref="teacherTitleChart" style="height: 300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">指导学生数分布</span>
              </div>
              <div ref="teacherStudentDistChart" style="height: 300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">题目发布数TOP10</span>
              </div>
              <div ref="teacherTopicRankChart" style="height: 300px;"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="12">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">指导学生数排行TOP10</span>
              </div>
              <el-table :data="teacherStats.studentRanking" height="350" stripe>
                <el-table-column type="index" label="排名" width="60" />
                <el-table-column prop="teacherName" label="教师姓名" width="150" />
                <el-table-column prop="title" label="职称" width="100" />
                <el-table-column prop="currentStudents" label="指导学生" width="100" align="center" />
                <el-table-column prop="utilizationRate" label="容量利用率" align="center">
                  <template slot-scope="scope">
                    <el-progress :percentage="parseFloat(scope.row.utilizationRate)" />
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">录取率排行TOP10</span>
              </div>
              <el-table :data="teacherStats.acceptanceRanking" height="350" stripe>
                <el-table-column type="index" label="排名" width="60" />
                <el-table-column prop="teacherName" label="教师姓名" width="150" />
                <el-table-column prop="title" label="职称" width="100" />
                <el-table-column prop="totalApplications" label="总申请数" width="100" align="center" />
                <el-table-column prop="acceptanceRate" label="录取率" align="center">
                  <template slot-scope="scope">
                    <el-tag :type="getRateType(scope.row.acceptanceRate)">
                      {{ scope.row.acceptanceRate }}%
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="学生分析" name="student">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">年级分布</span>
              </div>
              <div ref="gradeChart" style="height: 300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">录取状态</span>
              </div>
              <div ref="studentStatusChart" style="height: 300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">GPA分布</span>
              </div>
              <div ref="gpaChart" style="height: 300px;"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">专业分布TOP10</span>
              </div>
              <div ref="majorChart" style="height: 350px;"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="申请分析" name="application">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">志愿录取率对比</span>
              </div>
              <div ref="priorityCompareChart" style="height: 300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover">
              <div slot="header">
                <div class="card-header-info">
                  <span class="card-title">平均审核时长</span>
                </div>
              </div>
              <div class="review-time-stats">
                <div class="time-item">
                  <div class="time-value">{{ getAvgHours }}</div>
                  <div class="time-label">平均审核时长（小时）</div>
                </div>
                <div class="time-item">
                  <div class="time-value">{{ getAvgDays }}</div>
                  <div class="time-label">平均审核时长（天）</div>
                </div>
                <div class="time-item">
                  <div class="time-value">{{ getReviewedCount }}</div>
                  <div class="time-label">已审核数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="12">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">近30天申请趋势</span>
              </div>
              <div ref="appTrendChart" style="height: 350px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">近30天录取趋势</span>
              </div>
              <div ref="acceptTrendChart" style="height: 350px;"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="时间趋势" name="trend">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">近30天数据趋势</span>
              </div>
              <div ref="daily30TrendChart" style="height: 400px;"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24">
            <el-card shadow="hover">
              <div slot="header">
                <span class="card-title">近12个月数据趋势</span>
              </div>
              <div ref="monthly12TrendChart" style="height: 400px;"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  getOverview,
  getTopicStatistics,
  getTeacherStatistics,
  getStudentStatistics,
  getApplicationStatistics,
  getTimeTrendStatistics
} from '@/api/system/statistics'

export default {
  name: 'Statistics',
  data() {
    return {
      activeTab: 'overview',
      loading: false,
      overviewData: {},
      topicStats: {
        popularityRanking: [],
        acceptanceRanking: []
      },
      teacherStats: {
        studentRanking: [],
        acceptanceRanking: []
      },
      studentStats: {},
      appStats: {},
      trendStats: {},
      overviewCards: [
        { label: '学生总数', value: 0, icon: 'el-icon-user', color: '#409EFF' },
        { label: '教师总数', value: 0, icon: 'el-icon-s-custom', color: '#67C23A' },
        { label: '题目总数', value: 0, icon: 'el-icon-document', color: '#E6A23C' },
        { label: '整体录取率', value: '0%', icon: 'el-icon-pie-chart', color: '#F56C6C' }
      ],
      charts: {}
    }
  },
  computed: {
    getAvgHours() {
      return this.appStats.averageReviewTime?.avgHours || 0
    },
    getAvgDays() {
      return this.appStats.averageReviewTime?.avgDays || 0
    },
    getReviewedCount() {
      return this.appStats.averageReviewTime?.reviewedCount || 0
    }
  },
  mounted() {
    this.loadData()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    Object.values(this.charts).forEach(chart => {
      if (chart) {
        chart.dispose()
      }
    })
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        const [overview, topic, teacher, student, app, trend] = await Promise.all([
          getOverview(),
          getTopicStatistics(),
          getTeacherStatistics(),
          getStudentStatistics(),
          getApplicationStatistics(),
          getTimeTrendStatistics()
        ])

        this.overviewData = overview.data || {}
        this.topicStats = topic.data || {}
        this.teacherStats = teacher.data || {}
        this.studentStats = student.data || {}
        this.appStats = app.data || {}
        this.trendStats = trend.data || {}

        this.updateOverviewCards()
        
        this.$nextTick(() => {
          setTimeout(() => {
            this.initCharts()
          }, 100)
        })
      } catch (error) {
        console.error('加载统计数据失败:', error)
        this.$message.error('加载统计数据失败')
      } finally {
        this.loading = false
      }
    },
    
    updateOverviewCards() {
      this.overviewCards[0].value = this.overviewData.totalStudents || 0
      this.overviewCards[1].value = this.overviewData.totalTeachers || 0
      this.overviewCards[2].value = this.overviewData.totalTopics || 0
      this.overviewCards[3].value = (this.overviewData.overallAcceptanceRate || 0) + '%'
    },
    
    handleTabChange() {
      this.$nextTick(() => {
        setTimeout(() => {
          Object.keys(this.charts).forEach(key => {
            if (this.charts[key]) {
              this.charts[key].resize()
            }
          })
        }, 100)
      })
    },
    
    handleResize() {
      clearTimeout(this.resizeTimer)
      this.resizeTimer = setTimeout(() => {
        Object.values(this.charts).forEach(chart => {
          if (chart && !chart.isDisposed()) {
            chart.resize()
          }
        })
      }, 300)
    },
    
    initCharts() {
      try {
        this.initPieChart('topicStatusChart', this.overviewData.topicsByStatus || [], '题目状态分布')
        this.initPieChart('appStatusChart', this.overviewData.applicationsByStatus || [], '申请状态分布')
        this.initPieChart('difficultyChart', this.topicStats.difficultyDistribution || [], '难度分布')
        this.initPieChart('auditStatusChart', this.topicStats.auditStatusDistribution || [], '审核状态')
        this.initWordCloud('tagChart', this.topicStats.tagDistribution || [])
        this.initPieChart('teacherTitleChart', this.teacherStats.titleDistribution || [], '职称分布')
        this.initBarChart('teacherStudentDistChart', this.teacherStats.studentDistribution || [], '指导学生数')
        this.initHorizontalBarChart('teacherTopicRankChart', this.teacherStats.topicRanking || [])
        this.initBarChart('gradeChart', this.studentStats.gradeDistribution || [], '年级')
        this.initStudentStatusChart()
        this.initBarChart('gpaChart', this.studentStats.gpaDistribution || [], 'GPA')
        this.initHorizontalBarChart('majorChart', this.studentStats.majorDistribution || [], '专业')
        this.initPriorityCompareChart()
        this.initLineChart('appTrendChart', this.appStats.applicationTrend || [], '申请数量')
        this.initLineChart('acceptTrendChart', this.appStats.acceptanceTrend || [], '录取数量')
        this.initMultiLineChart()
        this.initMonthlyTrendChart()
      } catch (error) {
        console.error('初始化图表失败:', error)
      }
    },
    
    initPieChart(refName, data, title) {
      const chartDom = this.$refs[refName]
      if (!chartDom || !data || data.length === 0) return
      
      if (this.charts[refName]) {
        this.charts[refName].dispose()
      }
      
      const chart = echarts.init(chartDom)
      this.charts[refName] = chart
      
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          bottom: '0%',
          left: 'center'
        },
        series: [{
          name: title,
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }]
      }
      
      chart.setOption(option)
    },
    
    initBarChart(refName, data, title) {
      const chartDom = this.$refs[refName]
      if (!chartDom || !data || data.length === 0) return
      
      if (this.charts[refName]) {
        this.charts[refName].dispose()
      }
      
      const chart = echarts.init(chartDom)
      this.charts[refName] = chart
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: data.map(item => item.name),
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: title,
          type: 'bar',
          data: data.map(item => item.value),
          itemStyle: {
            color: '#409EFF',
            borderRadius: [5, 5, 0, 0]
          }
        }]
      }
      
      chart.setOption(option)
    },
    
    initHorizontalBarChart(refName, data, title = '') {
      const chartDom = this.$refs[refName]
      if (!chartDom || !data || data.length === 0) return
      
      if (this.charts[refName]) {
        this.charts[refName].dispose()
      }
      
      const chart = echarts.init(chartDom)
      this.charts[refName] = chart
      
      let names, values
      if (refName === 'teacherTopicRankChart') {
        names = data.slice(0, 10).map(item => item.teacherName)
        values = data.slice(0, 10).map(item => item.topicCount)
      } else {
        names = data.slice(0, 10).map(item => item.name)
        values = data.slice(0, 10).map(item => item.value)
      }
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '15%',
          right: '10%',
          bottom: '3%',
          top: '3%'
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: names,
          axisLabel: {
            interval: 0
          }
        },
        series: [{
          type: 'bar',
          data: values,
          itemStyle: {
            color: '#67C23A',
            borderRadius: [0, 5, 5, 0]
          }
        }]
      }
      
      chart.setOption(option)
    },
    
    initWordCloud(refName, data) {
      const chartDom = this.$refs[refName]
      if (!chartDom || !data || data.length === 0) return
      
      if (this.charts[refName]) {
        this.charts[refName].dispose()
      }
      
      const chart = echarts.init(chartDom)
      this.charts[refName] = chart
      
      const sortedData = data.slice(0, 15)
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: sortedData.map(item => item.name),
          axisLabel: {
            interval: 0,
            rotate: 45,
            fontSize: 10
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          type: 'bar',
          data: sortedData.map(item => item.value),
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ]),
            borderRadius: [5, 5, 0, 0]
          }
        }]
      }
      
      chart.setOption(option)
    },
    
    initStudentStatusChart() {
      const chartDom = this.$refs.studentStatusChart
      if (!chartDom) return
      
      if (this.charts.studentStatusChart) {
        this.charts.studentStatusChart.dispose()
      }
      
      const chart = echarts.init(chartDom)
      this.charts.studentStatusChart = chart
      
      const status = this.studentStats.acceptanceStatus || {}
      const data = [
        { name: '已录取', value: status.acceptedStudents || 0 },
        { name: '待审核', value: status.pendingStudents || 0 },
        { name: '未申请', value: status.notAppliedStudents || 0 }
      ]
      
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          bottom: '0%',
          left: 'center'
        },
        series: [{
          name: '学生状态',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          data: data
        }]
      }
      
      chart.setOption(option)
    },
    
    initPriorityCompareChart() {
      const chartDom = this.$refs.priorityCompareChart
      if (!chartDom) return
      
      if (this.charts.priorityCompareChart) {
        this.charts.priorityCompareChart.dispose()
      }
      
      const chart = echarts.init(chartDom)
      this.charts.priorityCompareChart = chart
      
      const comparison = this.appStats.priorityComparison || []
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['申请数', '录取数']
        },
        xAxis: {
          type: 'category',
          data: comparison.map(item => `第${item.priority}志愿`)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '申请数',
            type: 'bar',
            data: comparison.map(item => item.totalApplications || 0),
            itemStyle: { color: '#409EFF' }
          },
          {
            name: '录取数',
            type: 'bar',
            data: comparison.map(item => item.acceptedApplications || 0),
            itemStyle: { color: '#67C23A' }
          }
        ]
      }
      
      chart.setOption(option)
    },
    
    initLineChart(refName, data, title) {
      const chartDom = this.$refs[refName]
      if (!chartDom || !data || data.length === 0) return
      
      if (this.charts[refName]) {
        this.charts[refName].dispose()
      }
      
      const chart = echarts.init(chartDom)
      this.charts[refName] = chart
      
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.map(item => item.date)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: title,
          type: 'line',
          smooth: true,
          data: data.map(item => item.count),
          areaStyle: {
            color: 'rgba(64, 158, 255, 0.2)'
          },
          itemStyle: {
            color: '#409EFF'
          }
        }]
      }
      
      chart.setOption(option)
    },
    
    initMultiLineChart() {
      const chartDom = this.$refs.daily30TrendChart
      if (!chartDom) return
      
      if (this.charts.daily30TrendChart) {
        this.charts.daily30TrendChart.dispose()
      }
      
      const chart = echarts.init(chartDom)
      this.charts.daily30TrendChart = chart
      
      const topicTrend = this.trendStats.topicPublishTrend || []
      const appTrend = this.trendStats.applicationTrend || []
      const acceptTrend = this.trendStats.acceptanceTrend || []
      
      const dates = [...new Set([
        ...topicTrend.map(item => item.date),
        ...appTrend.map(item => item.date),
        ...acceptTrend.map(item => item.date)
      ])].sort()
      
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['题目发布', '申请数量', '录取数量']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dates
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '题目发布',
            type: 'line',
            smooth: true,
            data: dates.map(date => {
              const item = topicTrend.find(t => t.date === date)
              return item ? item.count : 0
            }),
            itemStyle: { color: '#E6A23C' }
          },
          {
            name: '申请数量',
            type: 'line',
            smooth: true,
            data: dates.map(date => {
              const item = appTrend.find(t => t.date === date)
              return item ? item.count : 0
            }),
            itemStyle: { color: '#409EFF' }
          },
          {
            name: '录取数量',
            type: 'line',
            smooth: true,
            data: dates.map(date => {
              const item = acceptTrend.find(t => t.date === date)
              return item ? item.count : 0
            }),
            itemStyle: { color: '#67C23A' }
          }
        ]
      }
      
      chart.setOption(option)
    },
    
    initMonthlyTrendChart() {
      const chartDom = this.$refs.monthly12TrendChart
      if (!chartDom) return
      
      if (this.charts.monthly12TrendChart) {
        this.charts.monthly12TrendChart.dispose()
      }
      
      const chart = echarts.init(chartDom)
      this.charts.monthly12TrendChart = chart
      
      const appTrend = this.trendStats.monthlyApplicationTrend || []
      const acceptTrend = this.trendStats.monthlyAcceptanceTrend || []
      
      const months = [...new Set([
        ...appTrend.map(item => item.month),
        ...acceptTrend.map(item => item.month)
      ])].sort()
      
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['申请数量', '录取数量']
        },
        xAxis: {
          type: 'category',
          data: months
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '申请数量',
            type: 'bar',
            data: months.map(month => {
              const item = appTrend.find(t => t.month === month)
              return item ? item.count : 0
            }),
            itemStyle: { color: '#409EFF' }
          },
          {
            name: '录取数量',
            type: 'bar',
            data: months.map(month => {
              const item = acceptTrend.find(t => t.month === month)
              return item ? item.count : 0
            }),
            itemStyle: { color: '#67C23A' }
          }
        ]
      }
      
      chart.setOption(option)
    },
    
    getRateType(rate) {
      if (rate >= 60) return 'success'
      if (rate >= 40) return 'warning'
      return 'danger'
    }
  }
}
</script>

<style scoped lang="scss">
.statistics-container {
  padding: 20px;
}

.header-cards {
  margin-bottom: 20px;
}

.stat-card {
  ::v-deep .el-card__body {
    .card-content {
      display: flex;
      align-items: center;
      
      .card-icon {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        
        i {
          font-size: 30px;
          color: #fff;
        }
      }
      
      .card-info {
        flex: 1;
        
        .card-value {
          font-size: 28px;
          font-weight: bold;
          color: #303133;
          margin-bottom: 5px;
        }
        
        .card-label {
          font-size: 14px;
          color: #909399;
        }
      }
    }
  }
}

.statistics-tabs {
  ::v-deep .el-tabs__content {
    padding: 20px 0;
  }
}

.card-title {
  font-weight: bold;
  font-size: 16px;
}

.review-time-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 300px;
  
  .time-item {
    text-align: center;
    
    .time-value {
      font-size: 48px;
      font-weight: bold;
      color: #409EFF;
      margin-bottom: 10px;
    }
    
    .time-label {
      font-size: 14px;
      color: #909399;
    }
  }
}

::v-deep .el-card {
  border-radius: 8px;
  
  .el-card__header {
    background-color: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
  }
}

::v-deep .el-table {
  .el-table__header {
    th {
      background-color: #f5f7fa;
    }
  }
}
</style>